<template>
  <div class="query-container">
    <div class="shawBox">
      <el-form :inline="true" :model="queryForm" class="query-form">
        <el-form-item label="用户名:">
          <el-input v-model="queryForm.name" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="用户类型:">
          <el-select v-model="queryForm.type" placeholder="请选择">
            <el-option
              v-for="item in userTypeOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审批结果:">
          <el-select v-model="queryForm.result" placeholder="请选择">
            <el-option label="请选择" value=""></el-option>
            <el-option label="通过" value="1"></el-option>
            <el-option label="拒绝" value="0"></el-option>
            <el-option label="待审批" value="-1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户状态:">
          <el-select v-model="queryForm.status" placeholder="请选择">
            <el-option label="请选择" value=""></el-option>
            <el-option label="启用" value="1"></el-option>
            <el-option label="未启用" value="0"></el-option>
          </el-select>
        </el-form-item>

        <div style="float: right">
          <el-button type="primary" @click="getSystemUsers">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
          <el-button type="primary" @click="handleAddUser">新增</el-button>
        </div>
      </el-form>
      <!-- 表格 -->
      <el-table
        :data="tableData"
        class="custom-table"
        style="width: 100%"
        height="calc(100vh - 240px)"
      >
        <el-table-column label="序号" align="center" width="80">
          <template #default="scope">
            {{ (currentPage - 1) * pageSize + scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="userName" label="用户"></el-table-column>
        <el-table-column prop="nickName" label="真实姓名"></el-table-column>
        <el-table-column prop="roleName" label="用户类型"></el-table-column>
        <el-table-column prop="routePointName" label="用户状态">
          <template #default="scope">
            <span v-if="scope.row.status">启用 </span>
            <span v-else>未启用 </span>
          </template></el-table-column
        >
        <el-table-column label="操作" width="120">
          <template #default="scope">
            <el-button
              link
              type="primary"
              @click="toEditDetail(scope.row.id)"
              size="small"
              >修改</el-button
            >
            <el-button
              link
              type="primary"
              size="small"
              @click="toDel(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="margin-top: 15px; float: right; text-align: center"
      >
      </el-pagination>
    </div>
    <!-- 新增/修改弹窗 -->
    <div
      class="shawBox"
      style="position: absolute; top: 0; left: 0; bottom: 0; right: 0"
      v-if="isAddUser"
    >
      <div style="float: right; height: 40px; overflow: hidden">
        <el-button v-if="isEdit" type="primary" @click="handleEditSubmit">
          修改
        </el-button>
        <el-button v-else type="primary" @click="submitAddUser">
          新增
        </el-button>
        <el-button @click="closeAddUser">返回</el-button>
      </div>
      <!-- <h3 style="font-size: 16px; line-height: 40px; font-weight: bold">
        新增用户
      </h3> -->
      <!-- 新增用户的表单 -->
      <el-form
        class="myFrom"
        :model="addUserForm"
        ref="addUserFormRef"
        label-width="120px"
        style="margin: 20px; clear: both"
      >
        <el-form-item>
          <template #label> <span style="color: red">*</span>用户名: </template>
          <div class="input-with-desc">
            <el-input
              v-model="addUserForm.username"
              placeholder="请输入用户名"
            />
            <span class="description">至少1个最多10个字符</span>
          </div>
        </el-form-item>
        <el-form-item>
          <template #label>
            <span style="color: red">*</span>真实姓名:
          </template>
          <div class="input-with-desc">
            <el-input
              v-model="addUserForm.realName"
              placeholder="请输入真实姓名"
            />
            <span class="description">至少1个最多10个字符</span>
          </div>
        </el-form-item>
        <el-form-item>
          <template #label>
            <span style="color: red">*</span>工作单位:
          </template>
          <div class="input-with-desc">
            <el-input
              v-model="addUserForm.workUnit"
              placeholder="请输入工作单位"
            />
            <span class="description">至少1个最多30个字符</span>
          </div>
        </el-form-item>
        <el-form-item>
          <template #label>工作职务: </template>
          <div class="input-with-desc">
            <el-input
              v-model="addUserForm.workTitle"
              placeholder="请输入工作职务"
            />
            <span class="description">最多30个字符或为空</span>
          </div>
        </el-form-item>
        <el-form-item>
          <template #label>
            <span style="color: red">*</span>座机号码:
          </template>
          <div class="input-with-desc">
            <el-input
              v-model="addUserForm.phone"
              placeholder="请输入座机号码"
            />
            <span class="description">至少11个最多13个字符</span>
          </div>
        </el-form-item>
        <el-form-item>
          <template #label>手机号码: </template>
          <div class="input-with-desc">
            <el-input
              v-model="addUserForm.mobile"
              placeholder="请输入手机号码"
            />
            <span class="description">手机号为11位0-9数字</span>
          </div>
        </el-form-item>
        <el-form-item>
          <template #label> <span style="color: red">*</span>地址: </template>
          <div class="input-with-desc">
            <el-input v-model="addUserForm.address" placeholder="请输入地址" />
            <span class="description">最多50个字符</span>
          </div>
        </el-form-item>
        <el-form-item>
          <template #label> 邮编: </template>
          <div class="input-with-desc">
            <el-input
              v-model="addUserForm.postalCode"
              placeholder="请输入邮编"
            />
            <span class="description">由6位数字组成</span>
          </div>
        </el-form-item>
        <el-form-item>
          <template #label>
            <span style="color: red">*</span>电子邮箱:
          </template>
          <div class="input-with-desc">
            <el-input
              v-model="addUserForm.email"
              placeholder="请输入电子邮箱"
            />
            <span class="description">输入合法邮箱地址</span>
          </div>
        </el-form-item>
        <el-form-item>
          <template #label>
            <span style="color: red">*</span>用户类型:
          </template>
          <el-select
            style="width: 350px"
            v-model="addUserForm.userType"
            placeholder="请选择用户类型"
          >
            <el-option
              v-for="item in userTypeOptions1"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <template #label>
            <span style="color: red">*</span>用户状态:
          </template>
          <el-select
            style="width: 350px"
            v-model="addUserForm.userStatus"
            placeholder="请选择用户状态"
          >
            <el-option label="启用" value="1"></el-option>
            <el-option label="禁用" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <div style="color: red">* 项为必填项</div>
        </el-form-item>
      </el-form>
    </div>
  </div>
  <div style="height: 10px"></div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import {
  systemUserIdApi,
  deleteSystemUserIdApi,
  typesRoleApi,
  systemUsersApi,
  postSystemUsersApi,
  putSystemUserIdApi,
} from "@/api/other";

const isAddUser = ref(false);
const isEdit = ref(false);
const addUserFormRef = ref(null);
const editId = ref("");

const userTypeOptions = ref([]);
const userTypeOptions1 = ref([]);
const addUserForm = ref({
  username: "",
  realName: "",
  workUnit: "",
  workTitle: "",
  phone: "",
  mobile: "",
  address: "",
  postalCode: "",
  email: "",
  userType: "",
  userStatus: "",
});

const handleAddUser = () => {
  addUserForm.value.username = "";
  addUserForm.value.realName = "";
  addUserForm.value.workUnit = "";
  addUserForm.value.workTitle = "";
  addUserForm.value.phone = "";
  addUserForm.value.mobile = "";
  addUserForm.value.address = "";
  addUserForm.value.postalCode = "";
  addUserForm.value.email = "";
  addUserForm.value.userType = "";
  addUserForm.value.userStatus = "";
  isAddUser.value = true;
};

const closeAddUser = () => {
  isAddUser.value = false;
  addUserFormRef.value?.resetFields();
};

const submitAddUser = async () => {
  const paramsObj = {
    address: addUserForm.value.address,
    company: addUserForm.value.workUnit,
    duty: addUserForm.value.workTitle,
    email: addUserForm.value.email,
    mobileNumber: addUserForm.value.mobile,
    nickName: addUserForm.value.realName,
    phoneNumber: addUserForm.value.phone,
    postCode: addUserForm.value.postalCode,
    roleId: addUserForm.value.userType,
    status: addUserForm.value.userStatus,
    userName: addUserForm.value.username,
  };
  const { code, data } = await postSystemUsersApi(paramsObj);
  if (code === 200) {
    // userTypeOptions.value = data;
    console.log(data);
    ElMessage.success("新增成功");
    getSystemUsers();
    closeAddUser(); // 关闭弹窗
  }
  // else {
  //   ElMessage({ message: msg, type: "warning" });
  // }
};

// 打开编辑表单
const handleEditSubmit = async () => {
  const paramsObj = {
    id: editId.value,
    address: addUserForm.value.address,
    company: addUserForm.value.workUnit,
    duty: addUserForm.value.workTitle,
    email: addUserForm.value.email,
    mobileNumber: addUserForm.value.mobile,
    nickName: addUserForm.value.realName,
    phoneNumber: addUserForm.value.phone,
    postCode: addUserForm.value.postalCode,
    roleId: addUserForm.value.userType,
    status: addUserForm.value.userStatus,
    userName: addUserForm.value.username,
  };
  const { code } = await putSystemUserIdApi(paramsObj);
  if (code === 200) {
    closeAddUser(); // 关闭弹窗
    ElMessage.success("修改成功");
    getSystemUsers();
  }
};

const queryForm = ref({
  type: "",
  status: "",
  result: "",
  name: "",
});

const tableData = ref([]);

let currentPage = ref(1);
let pageSize = ref(10);
let total = ref(0);

const handleReset = () => {
  queryForm.value.type = "";
  queryForm.value.status = "";
  queryForm.value.result = "";
  queryForm.value.name = "";
  pageSize.value = 10;
  currentPage.value = 1;
  getSystemUsers();
};

// 处理每页条数改变
const handleSizeChange = (val) => {
  pageSize.value = val;
  currentPage.value = 1;
  getSystemUsers();
};

// 处理当前页改变
const handleCurrentChange = (val) => {
  currentPage.value = val;
  getSystemUsers();
};

const toEditDetail = async (id) => {
  const { code, data } = await systemUserIdApi(id);
  if (code === 200) {
    editId.value = id;
    isEdit.value = true;
    isAddUser.value = true;
    addUserForm.value.username = data.userName;
    addUserForm.value.realName = data.nickName;
    addUserForm.value.workUnit = data.company;
    addUserForm.value.workTitle = data.duty;
    addUserForm.value.phone = data.phoneNumber;
    addUserForm.value.mobile = data.mobileNumber;
    addUserForm.value.address = data.address;
    addUserForm.value.postalCode = data.postCode;
    addUserForm.value.email = data.email;
    addUserForm.value.userType = String(data.userType);
    addUserForm.value.userStatus = String(data.status);
  }
  // else {
  //   ElMessage({ message: msg, type: "warning" });
  // }
};
const toDel = async (id) => {
  const { code } = await deleteSystemUserIdApi(id);
  if (code === 200) {
    getSystemUsers();
    ElMessage.success("删除成功");
  }
  // else {
  //   ElMessage({ message: msg, type: "warning" });
  // }
};
const getTypesRole = async () => {
  const { code, msg, data } = await typesRoleApi();
  if (code === 200) {
    userTypeOptions1.value = JSON.parse(JSON.stringify(data));
    data.unshift({
      id: "",
      name: "请选择",
      code: "",
    });
    userTypeOptions.value = data;
  } else {
    ElMessage({ message: msg, type: "warning" });
  }
};
const getSystemUsers = async () => {
  const paramsObj = {
    auditStatus: queryForm.value.result,
    status: queryForm.value.status,
    userType: queryForm.value.type,
    userName: queryForm.value.name,
    pageNum: currentPage.value,
    pageSize: pageSize.value,
  };
  const { code, msg, data } = await systemUsersApi(paramsObj);
  if (code === 200) {
    tableData.value = data.list;
    total.value = data.total;
  } else {
    ElMessage({ message: msg, type: "warning" });
  }
};
onMounted(() => {
  getSystemUsers();
  getTypesRole();
});
</script>

<style scoped lang="scss">
.input-with-desc {
  display: flex;
  width: 350px;
  align-items: center;
  ::v-deep .el-input__wrapper {
    width: 380px;
  }
  .tip {
    color: #ff0004;
    font-size: 14px;
    line-height: 22px;
  }
}

.description {
  color: #6b6b6b;
  font-size: 12px;
  white-space: nowrap;
  margin-left: 12px;
}
.query-container {
  position: relative;
  text-align: left;
  font-size: 14px;
  color: #222;
  .shawBox {
    min-height: calc(100vh - 113px);
    overflow: hidden;
    fill: #fff;
    border-radius: 12px;
    background-color: #fff;
    filter: drop-shadow(0 0 15px rgba(14, 41, 73, 0.1));
    padding: 15px;
    box-sizing: border-box;
  }
}
:deep(.el-form-item__content) {
  width: 130px;
}
:deep(.el-form--inline .el-form-item) {
  margin-right: 22px;
  margin-bottom: 15px;
}
:deep(.el-form-item__label) {
  color: #222;
}
.query-form {
  position: relative;
}
:deep(.el-pager li.is-active) {
  color: #fff;
  background: #286bf4;
  cursor: default;
  font-weight: bold;
}

/* 自定义表格样式 */
::v-deep .custom-table .el-table__header {
  height: 40px;
  line-height: 40px;
  background: #f6f9ff;
}
::v-deep .custom-table .el-table__header th {
  font-size: 12px;
  font-weight: 700;
  background: #f6f9ff;
  color: #222;
}
::v-deep .custom-table .el-table__row:nth-child(even) {
  background: #f9fbfd !important;
}
::v-deep .custom-table .el-table__row:nth-child(odd) {
  background-color: transparent;
}
::v-deep .custom-table .el-table__body td {
  color: #222;
}
:deep(.el-table .cell) {
  text-align: left;
}

.shawBox .myFrom {
  min-height: 490px;
  overflow-y: auto;
  flex-shrink: 0;
  ::v-deep .el-input__wrapper {
    height: 28px !important;
    // border: 1px solid #3c4660 !important;
  }
  ::v-deep .el-input__inner {
    font-size: 12px !important;
  }
}
::v-deep .shawBox {
  overflow: visible;
  &:has(.myFrom) {
    overflow-y: auto;
  }
}
/* 更新部分 */
::v-deep .custom-table .el-table__body td {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 0 !important;
  width: 100% !important; /* 继承列的固定宽度 */
}
::v-deep .custom-table .el-table__body .cell {
  width: 100% !important;
  overflow: hidden !important;
}
:deep(.custom-tooltip) {
  background-color: #286bf4 !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-size: 12px !important;
}
::v-deep .el-form-item {
  margin-bottom: 10px;
}
::v-deep .shawBox {
  /* 输入框字体 */
  .el-input__inner {
    font-size: 12px !important;
  }
  /* 下拉选择器 选中项字体 */
  .el-select__selected-item {
    font-size: 12px !important;
  }
  /* 下拉选择器 占位符字体 */
  .el-select__placeholder {
    font-size: 12px !important;
  }
  /* 下拉选择器 下拉选项字体 */
  .el-select-dropdown__item {
    font-size: 12px !important;
  }
  /* 日期选择器 关联输入框字体 */
  .el-date-editor .el-input__inner {
    font-size: 12px !important;
  }
}
</style>
